<script setup lang="ts">
  import useGoodBomChildListService from '@/services/module/product/useGoodBomChildListService'
  import pagination from '@/components/Pagination/index.vue'
  import { nextTick, PropType, ref, watch } from 'vue'
  import { TableInstance } from 'element-plus'

  const {
    goodBomChildList,
    goodBomChildListTotal,
    getGoodBomChildListParam,
    getGoodBomChildListLoading,
    getGoodBomChildList,
  } = useGoodBomChildListService()

  defineOptions({
    name: 'BomSelectModal',
  })

  const props = defineProps({
    goodId: {
      type: String,
      required: true,
    },
    goodSelection: {
      type: Array as PropType<Array<{ spareId: string; specId: string; isBom: boolean }>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: Array<GoodAPIResponse.GoodBomChildListItem>): void
  }>()

  const tableInstance = ref<TableInstance | null>(null)
  const paginationInstance = ref<InstanceType<typeof pagination> | null>(null)

  const visible = defineModel<boolean>('modelValue', { default: false })

  const selection = ref<Array<GoodAPIResponse.GoodBomChildListItem>>([])

  const getList = async () => {
    if (paginationInstance.value) {
      getGoodBomChildListParam.value.page = paginationInstance.value.current
      getGoodBomChildListParam.value.limit = paginationInstance.value.size
      await getGoodBomChildList(props.goodId)

      goodBomChildList.value.forEach((bom) => {
        props.goodSelection.forEach((goodSelection) => {
          if (
            bom.goodsId === goodSelection.spareId &&
            bom.goodsSpecId === goodSelection.specId &&
            goodSelection.isBom
          ) {
            tableInstance.value && tableInstance.value.toggleRowSelection(bom, true)
          }
        })
      })
    }
  }

  const handleTableSelectionChange = (value: Array<GoodAPIResponse.GoodBomChildListItem>) => {
    selection.value = value
  }

  const onConfirmClick = () => {
    emits('update', selection.value)
    visible.value = false
  }

  watch(visible, (value) => {
    if (value) {
      nextTick(() => {
        getList()
      })
    }
  })
</script>

<template>
  <h-drawer
    v-model="visible"
    :width="1000"
    unit="px"
    title="BOM查询"
    :loading="getGoodBomChildListLoading"
    @close="visible = false"
  >
    <div class="bom-select-modal">
      <div class="table-pagination">
        <div class="table-wrapper">
          <el-table
            ref="tableInstance"
            :width="1000"
            unit="px"
            :border="true"
            :stripe="true"
            :data="goodBomChildList"
            @selection-change="handleTableSelectionChange"
          >
            <!--选择-->
            <el-table-column type="selection" width="50" :align="'center'" fixed="left" />

            <!--序号-->
            <el-table-column type="index" label="序号" :align="'center'" fixed="left" width="50" />

            <!--产品编号-->
            <el-table-column label="产品编号" prop="code" width="140" />

            <!--名称-->
            <el-table-column label="名称" prop="name" min-width="140" />

            <!--规格-->
            <el-table-column label="规格" prop="specName" width="140" />

            <!-- 单价 -->
            <el-table-column label="单价" width="140">
              <template #default="{ row }"> ￥{{ (row.price || 0).toFixed(2) }} </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="footer">
          <pagination
            ref="paginationInstance"
            :list_total="goodBomChildListTotal"
            @size-change="getList"
            @current-change="getList"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <h-button type="primary" is-modal @click="onConfirmClick">确定</h-button>
      <h-button is-modal @click="visible = false">取消</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss">
  .bom-select-modal {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%;
    height: 100%;

    .table-pagination {
      display: flex;
      flex-direction: column;
      row-gap: 12px;
      flex: 1;
      height: 0;

      .table-wrapper {
        max-height: calc(100% - 40px);
      }

      .footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
